<template>
  <div class="app-container">
    <!-- 筛选 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery">
        <!-- 是否已认证 -->
        <el-form-item>
          <el-date-picker v-model="listQuery.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-input v-model.trim="listQuery.name" autocomplete="off" placeholder="请输入航班号、起站、落站" />
        </el-form-item>
        <!-- 是否禁用 -->
        <el-form-item>
          <el-select v-model="listQuery.status" placeholder="请选择飞行种类" style="width: 180px" clearable>
            <el-option key="0" label="Private" value="0" />
            <el-option key="1" label="Ferry" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row size="mini">
      <el-table-column label="#" type="index" width="50" />

      <el-table-column label="编号" prop="id" />
      <el-table-column label="日期" prop="flightDate" />
      <el-table-column label="航班号" prop="flightNo" />
      <el-table-column label="机号" prop="aircraftNumber" />
      <el-table-column label="机型" prop="acType" />
      <el-table-column label="飞行种类" prop="flightType" />
      <el-table-column label="起站" prop="depAirport" />
      <el-table-column label="预起" prop="std" />
      <el-table-column label="实起" prop="atd" />
      <el-table-column label="预落" prop="sta" />
      <el-table-column label="实落" prop="ata" />
      <el-table-column label="落站" prop="arrAirport" />
      <el-table-column label="状态" prop="status" />
    </el-table>
    <!-- 分页 -->
    <div class="m-center">
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchList" />
    </div>
  </div>
</template>

<script>
import { queryCustomerFlightRecord } from '@/api/client'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ClientTable',
  components: { Pagination },
  filters: {},
  data() {
    return {
      tableData: [],
      total: 0,
      listQuery: {
        customerId: '',
        page: 1,
        limit: 10,
        startDate: '',
        endDate: '',
        flightNo: '',
        depAirport: '',
        arrAirport: '',
        flightType: '',
        daterange: ''
      },
      listLoading: false
    }
  },

  created() {
    const id = this.$route.params && this.$route.params.id
    if (id) {
      this.listQuery.customerId = parseInt(id)
      this.fetchList()
    }
  },
  methods: {
    // 得到列表
    async fetchList() {
      this.listLoading = true
      if (this.listQuery.daterange.length) {
        this.listLoading.startDate = this.listQuery.daterange[0]
        this.listLoading.endDate = this.listQuery.daterange[1]
      }
      queryCustomerFlightRecord(this.listQuery).then((response) => {
        this.tableData = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchList()
    }
  }
}
</script>
